<template>
	<view class="app l_pages" :style="skin">
		<jnavbar :title="'商品列表'" :PageId="4"></jnavbar>
		<view class="page_container">
			<view class="hd-height">
				<view class="search_div">
					<view class="input_div" @click="gosearch">
						<text class="iconfont el-sc-search "></text>
						<text>{{ params.name }}</text>
					</view>
				</view>
				<view class="tabs_div">
					<view class="tabs_item" :class="params.sell_sort == 0 && params.price_sort == 0 ? 'active' : ''" @click="getMlist()"><text>综合</text></view>
					<view class="tabs_item" @click="changeparams('sell_sort')">
						<text>销量</text>
						<view>
							<text class="iconfont el-sc-xia2" :class="params.sell_sort == 2 ? 'active' : ''"></text>
							<text class="iconfont el-sc-xia2" :class="params.sell_sort == 1 ? 'active' : ''"></text>
						</view>
					</view>
					<view class="tabs_item" @click="changeparams('price_sort')">
						<text>售价</text>
						<view>
							<text class="iconfont el-sc-xia2" :class="params.price_sort == 2 ? 'active' : ''"></text>
							<text class="iconfont el-sc-xia2" :class="params.price_sort == 1 ? 'active' : ''"></text>
						</view>
					</view>
					<view class="tabs_item" @click="showpopup"><text>筛选</text></view>
					<view class="tabs_item icons" @click="showtype = !showtype"><text class="iconfont el-sc-liebiao3"></text></view>
				</view>
			</view>
			<scroll-view scroll-y="true" class="scroll-view-page" @scrolltolower="getlist">
				<view class="empty_div" v-if="hasShow == 'none'"><u-empty text="没有相关的商品" mode="order"></u-empty></view>
				<block v-else>
					<view v-if="showtype" class="list card">
						<view class="list_item" v-for="(item, i) in list" :key="i" @click="todetail(item)">
							<view class="img_box_g"><easy-loadimage :image-src="item.master" :mode="'act'" :sellout="item.sellout" :borderradius="12"></easy-loadimage></view>
							<view class="item_info">
								<text class="goods_name">{{ item.goods_name }}</text>

								<view class="price_box">
									<view class="price_left">
										<text>
											<text>&yen;&nbsp;</text>
											{{ item.sell_price }}
										</text>
										<view class="vip-price" v-if="item.now_level_price > 0">
											<text class="vip-name">会员价</text>
											<text>￥{{ item.now_level_price }}</text>
										</view>
										<text v-else>&yen;&nbsp;{{ item.original_price }}</text>
									</view>
									<view class="price_right">
										<text @click.stop="gotrolley(item)" :class="mallBaseinfo.trolley_pic + ' iconfont'"></text>
										<text>销量：{{ item.sell }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-show="!showtype" class="list"><QSMasonry ref="QSMasonry" hasImage :col="2"></QSMasonry></view>
				</block>
			</scroll-view>

			<u-popup ref="popup" v-model="showPopupRight" mode="right">
				<!-- #ifdef MP-WEIXIN -->
			<u-gap height="200"></u-gap>
				<!-- #endif -->
					
				<view class="content">
					<scroll-view scroll-y="true" class="content-scroll" >
					<view v-if="level > 1" class="" v-for="(item, i) in classifylist" :key="i">
						<view >
							<text class="class_title">{{ item.name }}</text>
							<view class="uni-flex-wrap uni-flex-row">
								<text @click="classify_id = item.id" v-for="(item, i) in item.children" :key="i" :class="classify_id == item.id ? 'active class_div' : 'class_div'">
									{{ item.name }}
								</text>
							</view>
						</view>						
					</view>
					<view v-if="level == 1">
						<text @click="classify_id = item.id" v-for="(item, i) in classifylist" :key="i" :class="classify_id == item.id ? 'active class_div' : 'class_div'">
							{{ item.name }}
						</text>
					</view>
					</scroll-view>
					<view class="btns">
						<view class="bor-t" @click="searchbyclassify(false)">重置</view>
						<view class="sure" @click="searchbyclassify(true)">确定</view>
					</view>
				</view>
				
			
				
			</u-popup>
		</view>
		<tab-bar ref="tabbar" :PageId="4"></tab-bar>
		<trolley></trolley>
		<uni-login ref="Login" @callback="logincallback"></uni-login>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import QSMasonry from '@/components/QS-Masonry/QS-Masonry.vue';
import util from '@/common/util.js';
export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			list: [],
			scrollviewHigh: 0,
			page: 1,
			showtype: false,
			showPopupRight: false,
			popType: 'right',
			classify_id: 0,
			classifylist: [],
			level: 0,
			params: {
				sell_sort: 0,
				price_sort: 0,
				name: ''
			},
			hasShow: 'none'
		};
	},
	components: {
		QSMasonry
	},
	async onLoad(params) {
		await this.$getWx
		if (params.name) {
			this.params.name = params.name;
		}
		if (params.id) {
			this.classify_id = params.id;
		}
		this.getlist();
	},
	onShow() {
		var _this = this;
		this.$nextTick(a => {
			_this.$refs.tabbar.gettabs();
		});
	},
	computed: {
		...mapState({
			mallBaseinfo: state => state.mallBaseinfo,
			skin:state=>state.skin
		})
	},
	onReady() {
		let _this = this;
	},
	onPullDownRefresh() {
		this.page = 1;
		this.list = [];
		this.$refs.QSMasonry.reset();
		this.getlist();
	},
	methods: {
		logincallback(){
			
		},
		getMlist() {
			this.page = 1;
			this.list = [];
			// this.$refs.uWaterfall.clear();
			this.params.sell_sort = 0;
			this.params.price_sort = 0;
			if (!this.showtype) {
				this.$refs.QSMasonry.reset();
			}
			this.getlist();
		},
		gotrolley(item) {
			let data = {
				show: true,
				id: item.id
			};
			this.$store.commit('settrolley', data);
		},
		showpopup() {
			this.getclassify();
			this.showPopupRight = true;
			// this.$refs.popup.open();
		},
		gosearch() {
			this.Jumpurl({
				link: './searchindex',
				type: 1,
				login_type: 1
			});
		},
		changeparams(type) {
			this.params[type] = this.params[type] + 1 > 2 ? 0 : this.params[type] + 1;
			this.list = [];
			this.page = 1;
			if (!this.showtype) {
				this.$refs.QSMasonry.reset();
			}
			// this.$refs.uWaterfall.clear();
			this.getlist();
		},

		todetail(item) {
			this.Jumpurl({
				type: 2,
				id: item.id
			});
		},
		// loadlist(){

		// },
		getlist() {
			let _this = this;
			// this.changeloading({loading: true,loadtext:'加载中...'});
			let params = {
				page: this.page,
				size: 6
			};
			if (this.params.price_sort > 0) {
				params.price_sort = this.params.price_sort;
			}
			if (this.params.sell_sort > 0) {
				params.sell_sort = this.params.sell_sort;
			}
			if (this.params.name) {
				params.name = this.params.name;
			}
			if (this.classify_id) {
				params.classify_id = this.classify_id;
			}
			this.$http('/goods/list', params, 'post').then(res => {
				let jsondata = res.data;
				let list = jsondata.msg.data;
				uni.stopPullDownRefresh();
				if (list.length > 0) {
					this.hasShow = 'list';
					list.forEach(a => {
						a.sellout = !(a.sell - a.total);
						if(a.sku&&a.sku.length>0){
							a.now_level_price = util.getminprice(a.sku);
						
						}else{
							if (a.level_price) {
								a.now_level_price = util.getprice(a);
							}	
						}
					});
					this.list = this.list.concat(list);

					this.$nextTick(function() {
						if (!_this.showtype) {
							_this.$refs.QSMasonry.add(list);
						}
					});

					this.page++;
				} else {
					if (this.page == 1) {
						this.hasShow = 'none';
					} else {
						uni.showToast({
							title: '没有更多数据了',
							icon: 'none'
						});
					}
				}
			});
		},
		searchbyclassify(t) {
			if (!t) {
				this.classify_id = '';
			}
			this.page = 1;
			this.list = [];
			this.$refs.QSMasonry.reset();
			// this.$refs.uWaterfall.clear();
			this.getlist();
			this.showPopupRight = false;
		},
		getclassify() {
			let params = {};
			this.$http('/classify', params, 'get').then(res => {
				uni.stopPullDownRefresh();
				if (res.statusCode == 200) {
					this.classifylist = res.data.msg.data;
					this.level = res.data.msg.level;
					// this.level=res.data.msg.level
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.search_div {
	width: 750rpx;
	background: #fff;
	padding: 32rpx;
	.input_div {
		display: flex;
		align-items: center;
		background: #f5f5f5;
		height: 60rpx;
		border-radius: 12rpx;
		font-size: 24rpx;
	}
	.iconfont {
		margin: 0 15rpx;
	}
}
.tabs_div {
	display: flex;
	background: #ffffff;
	.tabs_item {
		&.active {
			color: var(--main-color);
		}
		flex: 1;
		display: flex;
		justify-content: center;
		font-size: 28rpx;
		height: 80rpx;
		align-items: center;
		view {
			margin-left: 10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			text {
				font-size: 12rpx;
				color: #9b9b9b;
				&.active {
					color: var(--main-color);
				}
			}
			text:first-child {
				transform: rotate(180deg);
			}
		}
	}
}

.scroll-view-page {
	height: calc(100% - 204rpx);
}
.list {
	/deep/.u-column {
		width: 50%;
	}
}
.list_item {
	// width: 375rpx;
	display: flex;
	// width: 344rpx;
	flex-direction: column;
	background: #ffffff;
	margin-bottom: 10rpx;
	border-radius: 12rpx;
	overflow: hidden;
	// margin: 10rpx;

	.img_box {
		// height: 344rpx;
		// image {
		// 	width: 344rpx;
		// 	height: 344rpx;
		// }
		// /deep/.easy-loadimage {
		// 	width: 344rpx;
		// 	height: 344rpx;
		// }
	}
	.item_info {
		padding: 16rpx 8rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.goods_name {
		line-height: 40rpx;
		color: #212121;
		font-size: 28rpx;
		font-weight: 500;
		// &.two-line-hide {
		// 	overflow: hidden;
		// 	text-overflow: ellipsis;
		// 	display: -webkit-box;
		// 	-webkit-box-orient: vertical;
		// 	-webkit-line-clamp: 2;
		// }
	}
	.price_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.price_right {
			display: flex;
			flex-direction: column;
		}
		.price_left {
			> text:first-child {
				font-size: 32rpx;
				font-weight: 700;
				color: #ff3c29;
				line-height: 40rpx;
				text {
					font-size: 20rpx;
					font-weight: 300;
				}
			}
			> text:last-child {
				color: #969696;
				font-size: 20rpx;
				text-decoration: line-through;
			}
		}
		.price_right {
			text-align: right;
			.iconfont {
				color: var(--main-color);
				font-size: 40rpx;
				line-height: 40rpx;
			}
			> text:last-child {
				color: #969696;
				font-size: 20rpx;
			}
		}
	}
}

.card {
	display: flex;
	flex-wrap: wrap;
	padding: 0 24rpx;
	justify-content: space-between;
	padding-top: 20rpx;
	.list_item {
		width: 100%;
		flex-direction: row;
		padding: 16rpx 24rpx;
		margin: 0rpx;
		margin-bottom: 20rpx;
		.img_box_g {
			width: 240rpx;
			height: 240rpx;

			margin-right: 12px;
			/deep/.easy-loadimage {
				height: 240rpx;
				width: 240rpx;
				.origin-img,
				.loadfail-img,
				.loading-img {
					border-radius: 12px;
				}
			}
		}
	}
}
.img_box {
	position: relative;
}

.content {
	width: 80vw;
	padding: 20rpx;
	height: 100%;
	position: relative;
	/* #ifdef MP-WEIXIN */
	height: calc(100% - 200rpx);
	/* #endif */
	.content-scroll{
		height: calc(100% - 120rpx);
	}
	.btns {
		padding: 32rpx 0;
		box-sizing: initial;
		height: 68rpx;
		line-height: 68rpx;
		font-size: 28rpx;
		color: #212121;
		position: absolute;
		bottom: 0;
		left: 10%;
		width: 80%;
		display: flex;
		align-items: center;
		view {
			flex: 1;
			text-align: center;
			box-sizing: border-box;
		}
		.bor-t {
			border: 2rpx solid #e6e7eb;
			border-radius: 40rpx 0 0 40rpx;
		}
		.sure {
			background:var(--main-color);
			color: #fff;
			border-radius: 0 40rpx 40rpx 0;
		}
	}
}
.class_div {
	margin: 0 13px 8px 0;
	width: 99px;
	height: 35px;
	border-radius: 17px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: #565656;
	background: #f5f5f5;
	border: 1px solid transparent;
	&.active {
		background: #fff;
		border: 1px solid var(--main-color);
		color: var(--main-color);
	}
}
.class_title {
	margin-bottom: 20rpx;
	display: block;
}

</style>
